<template>
  <div class="v-table-td-credit">
    <v-table-number ref="numberRef" field="creditAmount" :rowIndex="rowIndex" @onEnter="onEnter" @cancel-edit="cancelEdit" :number="number"/>
    <div v-if="showTip && !carryover" class="warn-tip"><i class="fa fa-warning"></i> 请录入借方{{ number > 0 ? '负' : '正' }}数！</div>
  </div>
</template>
<script setup>
import VTableNumber from "@components/common/VoucherTable/VTableNumber.vue";
import {defineExpose, inject, onMounted, ref, watch} from "vue";
import {divide, round} from "xe-utils";

const props = defineProps(['credit', 'rowIndex', 'detail']);

const showTip = ref(false)
const number = ref(null)
const numberRef = ref(null)

const updateFiled = inject('updateFiled');
const next = inject('next');
const carryover = inject('carryover');

const cancelEdit = (numVal) => {
  number.value = numVal;
  props.detail.price = round(divide(numVal, props.detail.num), 2);
  updateFiled(props.rowIndex, 'creditAmount', numVal);
}

const onEnter = () => {
  cancelEdit();
  next(props.rowIndex + 1, 'summary');
}

watch(() => props.credit, (val) => {
  number.value = val;
  showTip.value = val && props.detail?.subject?.type === '损益' && props.detail?.subject?.balanceDirection === '借';
})

watch(() => props.detail?.subject, (s) => {
  showTip.value = s && number.value && s.type === '损益' && s.balanceDirection === '借';
})

onMounted(() => {
  number.value = props.credit;
})

defineExpose({
  doEdit: () => numberRef.value.doEdit(),
  endEdit: () => numberRef.value.cancelEdit()
})
</script>
<style scoped lang="less">
.v-table {

  &-td {
    &-credit {
      width: 221px;
      position: relative;
      background-image: url("../../../assets/moneyUint.png");

      .warn-tip {
        position: absolute;
        bottom: 0;
        right: 0;
        color: red;
        z-index: 1;
        font-weight: bold;
      }
    }
  }
}
</style>
